<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="报警数量统计"
      :selectOptions="selectOptions"
    />
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        v-for="item in tableColumnList"
        :prop="item.prop"
        :label="item.label">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="month"-->
        <!--label="月份">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="all_num"-->
        <!--label="报警总数">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="type1"-->
        <!--label="市政设施">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="type2"-->
        <!--label="房屋建筑">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="type3"-->
        <!--label="交通设施">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="type4"-->
        <!--label="在建工地">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="type5"-->
        <!--label="人员密集区域"-->
        <!--width="110px">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="level_1"-->
        <!--label="一级">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="level_2"-->
        <!--label="二级">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="level_3"-->
        <!--label="三级">-->
      <!--</el-table-column>-->
    </el-table>
    <!-- <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      :is-index="true"
      title=""
      maxHeight="30vh"
      ref="table"
    >
    </v-table> -->
  </div>
</template>

<script>
import VTable from "@/components/VTable/index";
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import { time_select_optios } from '@/utils/global.js';
import {alarmList} from "@/api/alarm/statistics";

export default {
  name: "alarmAmount",
  components: {
    VTable,
    formTitleVue,
  },
  props: {
    alarmTypeOptions: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      tableData: [],
      tableColumnList:[],
      selectOptions: [
        {
          selectValue: "",
          options: this.alarmTypeOptions,
          changeFn: this.selectChange3,
        },
        {
          selectValue: "",
          options:[
            { label: "全部", value: "" },
            {value: "440100000000", label: "广州市"},{value: "440200000000", label: "韶关市"},{value: "440300000000", label: "深圳市"},{value: "440400000000", label: "珠海市"},{value: "440500000000", label: "汕头市"},{value: "440600000000", label: "佛山市"},{value: "440700000000", label: "江门市"},{value: "440800000000", label: "湛江市"},{value: "440900000000", label: "茂名市"},{value: "441200000000", label: "肇庆市"},{value: "441300000000", label: "惠州市"},{value: "441400000000", label: "梅州市"},{value: "441500000000", label: "汕尾市"},{value: "441600000000", label: "河源市"},{value: "441700000000", label: "阳江市"},{value: "441800000000", label: "清远市"},{value: "441900000000", label: "东莞市"},{value: "442000000000", label: "中山市"},{value: "445100000000", label: "潮州市"},{value: "445200000000", label: "揭阳市"},{value: "445300000000", label: "云浮市"},
          ],
          changeFn: this.selectChange1,
        },
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn: this.selectChange2,
        }
      ],
      loading: false,
      searChForm: {
        areaCode: '',
        startTime: '',
        endTime: '',
        type:2,
        modeType:'',
      },
    };
  },
  methods: {
    selectChange3(item){
      this.searChForm.modeType = item
      this.search()
    },
    selectChange1(item){
      this.searChForm.areaCode = item
      this.search()
    },
    selectChange2(item){
      this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
      this.search()
    },
    init(){
      this.searChForm.areaCode = this.selectOptions[1].selectValue
      this.searChForm.startTime = time_select_optios[this.selectOptions[2].selectValue].startTime+" 00:00:00"
      this.searChForm.endTime = time_select_optios[this.selectOptions[2].selectValue].endTime+" 23:59:59"
      this.search()
    },
    search() {
      this.fetch({
        ...this.searChForm,
      })
    },
    fetch(params = {}) {
      // params.areaCode = this.$store.state.account.user.deptIds;
      alarmList(params).then(res => {
        if (res.code == 200) {
          this.tableData=res.data.data
          this.tableColumnList = res.data.tableColumnList;
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      }).finally(final => {
        console.log("error")
      })
    },
    getData() {
      // console.log(this.searChForm)
      this.tableData = [
        {
          name: "1月",
          address: "广州市",
        },
        {
          name: "2月",
          address: "广州市",
        },
        {
          name: "3月",
          address: "广州市",
        },
        {
          name: "4月",
          address: "广州市",
        },
      ];
    },
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="scss" scoped>
.alarmAmount-root {
  .table {
    // height: 30vh;
  }
}

::v-deep .table-col-select-container{
  // display: none;
}
</style>
